<template>
    <van-cell-group v-for="item in lists" :key="item">
        <van-cell center :icon="item.img" :title="item.title" :value="item.value"
        :label="item.label"/>
    </van-cell-group>
</template>

<script setup>
const lists = [
    {
        img:'/images/avatar1.jpg',
        title:'食品旗舰店',
        value:'星期一',
        label:'您有一条店铺消息'
    },
    {
        img:'/images/avatar2.jpg',
        title:'水果旗舰店',
        value:'星期二',
        label:'亲爱的果粉'
    },
    {
        img:'/images/avatar3.png',
        title:'订阅号消息',
        value:'星期日',
        label:'水果旗舰店：【新到水果新品】'
    },
    {
        img:'/images/avatar4.png',
        title:'消息好内容',
        value:'星期一',
        label:'食品旗舰店：【大量新品到货】'
    }
]
</script>

<style lang="less" scoped>
:deep(.van-cell) {
    .van-cell__left-icon {
        width: 40px;
        height: 40px;
        .van-icon__image {
            width: 100%;
            height: 100%;
        }
    }
    .van-cell__title{
        .van-cell__label {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 165px;
        }
    }
}
</style>